import React, { useState } from 'react';
import axios from 'axios';
import { Calendar,Empty } from 'antd-mobile';
import 'antd-mobile/es/global'; // 引入全局样式（v5 或更高版本）
import '../../css/chy/List.css';
import Xx from '../../css/chy/icon/Xx.svg?react'

function App() {
    const [selectedDate, setSelectedDate] = useState(null);
    const [orders, setOrders] = useState([]);

    // 处理日期选择事件
    const handleDateClick = async (date) => {
        const formattedDate = date.toISOString().split('T')[0]; // 转换为 YYYY-MM-DD
        console.log('Selected Date:', formattedDate); // 检查格式是否正确
        setSelectedDate(formattedDate);
        try {
            const { data } = await axios.get(`http://localhost:3000/rili/orders/${formattedDate}`);
            setOrders(data.orders);
        } catch (error) {
            console.error('Error fetching orders:', error);
            setOrders([]);
        }
    };

    return (
        <div className='rl-bbox'>
            <p className='calendar-header-title'>我的预约
                <span className='span1'>
                    <Xx className='xx'></Xx>
                </span>
            </p>
            <div className='calendardiv'> {/* 使用 div 包裹 Calendar */}
                <Calendar
                    className='calendar-custom'
                    selectionMode='single' // 选择模式为单日
                    onChange={(val) => {// 打印选择的日期
                        handleDateClick(val); // 调用处理函数
                    }}
                />
            </div>
            {selectedDate && (
                <div>
                    <div className='calendar-header'>
                         <p>{selectedDate} 的服务订单</p>
                         <div className='btm'>
                            查看全部
                         </div>
                         
                    </div>
                   
                    {orders.length > 0 ? (
                        <div>
                            {orders.map((order, index) => (       
                                <div key={index} className='order-item'>
                                    <div className='service-div'>
                                        <img src={order.img} alt="" className='service-img'/>
                                    </div>
                                    <div className='order-info'>
                                        <p>
                                            <strong>{order.service}</strong>
                                        </p>
                                        <p>
                                            {order.provider}
                                        </p>
                                        <p>
                                            {order.status==='pending' ? '待进行' : order.status==='completed' ? '已完成' : '已取消'}
                                        </p>
                                           
                                    </div>
                                    
                                </div>
                            ))}
                        </div>
                    ) : (
                        <div>
                            <Empty className='empty'                              
                                imageStyle={{ width: 128 }}
                                description='暂无服务订单'
                                />
                        </div>
                    )}
                </div>
            )}
        </div>
    );
}

export default App;